<template>
  <div class="page-login">
    <div class="login-header">
      <a href="/" class="logo" />
    </div>
    <div class="login-panel">
      <div class="banner">
        <img 
          src="//s0.meituan.net/bs/file/?f=fe-sso-fs:build/page/static/banner/www.jpg"
          width="480"
          height="370"
          alt="美团网">
      </div>
      <div class="form">
        <h4 v-if="error" class="tips"><i/>{{error}}</h4>
        <p><span>账号登录</span></p>
        <el-input v-model="username" prefix-icon="profile"></el-input>
        <el-input v-model="pwd" prefix-icon="password" type="password"></el-input>
        <div class="foot">
          <a href="/" class="forget">忘记密码？</a>
          <!-- <b>忘记密码？</b> -->
          <!-- <el-checkbox v-model="checked">
            7天内自动登录
          </el-checkbox> -->
        </div>
        <el-button class="btn-login btn" type="success" size="mini" @click="login">登录</el-button>
        <div class="foot">
          还没有账号？<a href="/register">免费注册</a>
        </div>
      </div>
    </div>
  </div>
</template>
<script>
import cryptoJS from 'crypto-js'
export default {
  layout: 'blank',
  data() {
    return {
      username: 'lucking',
      pwd: '123456',
      error: '',
      // checked: false
    }
  },
  methods: {
    async login() {
      let res = await this.$store.dispatch('api/signin', {
        username: this.username, 
        password: this.pwd
      })
      if (res.status === 200) {
        if (res.data && res.data.code === 0) {
          location.href = '/'
        } else {
          this.error = res.data.msg
        }
      } else {
        this.error = '服务器出错'
      }
      
    }
  }
}
</script>
<style lang="scss">
@import "@/assets/css/login";
</style>